<template>
  <div id="dashboard-app">
    <router-view />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DashboardApp',
});
</script>

<style scoped>
#dashboard-app {
  width: 100%;
  height: auto;
  min-height: fit-content;
  /* 确保在微前端环境中能够正确处理滚动 */
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

/* 确保在微前端容器中内容可以正常滚动 */
:global(.micro-frontend) #dashboard-app {
  height: auto;
  min-height: fit-content;
}

/* 确保页面布局能够紧凑显示，底部版权信息贴近内容 */
:global(.tdesign-starter-footer-layout) {
  margin-top: 0 !important;
  position: relative !important;
}

/* 修复可能的icon组件问题 */
:global(.t-icon) {
  display: inline-block;
  vertical-align: middle;
}

/* 确保SVG图标正确显示 */
:global(.t-icon svg) {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
</style>
